<template>
	<div>
		<el-dialog
			:visible="visible"
			:close-on-click-modal="false"
			:destroy-on-close="true"
			:before-close="handleClose"
			@close="handleClose"
			width="800px"
			center
		>
			<div slot="title" style="font-weight: 900;font-size: large;">
				新增/修改俱乐部联盟
			</div>
			<el-form
				ref="submitForm"
				:model="submitForm"
				label-width="150px"
				label-suffix=":"
			>
				<el-form-item
					prop="leaguesName"
					label="联盟名称"
					:rules="[
						{
							required: true,
							message: '联盟名称未配置，请检查',
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="submitForm.leaguesName"
						autocomplete="off"
						style="width: 360px"
						v-input="{ name: 'noEmpty' }"
						:maxlength="20"
						:placeholder="$t('common.please_enter')"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					prop="remark"
					label="备注"
					:rules="[
						{
							required: true,
							message: '备注未配置，请检查',
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="submitForm.remark"
						autocomplete="off"
						style="width:360px"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
						type="textarea"
						show-word-limit
						clearable
						:rows="5"
						:maxlength="200"
					></el-input>
				</el-form-item>
			</el-form>
			<div style="margin-bottom: 10px;">
				俱乐部清单
			</div>
			<div style="margin-bottom: 5px;">
				<el-button type="primary" size="mini" @click="handleAddClub">
					新增
				</el-button>
			</div>
			<div>
				<el-table
					ref="refTable"
					size="mini"
					class="small-size-table"
					border
					:data="clubList"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
					header-align="center"
				>
					<el-table-column
						type="index"
						label="序号"
						width="80"
						align="center"
					/>
					<el-table-column min-width="200" align="center">
						<template #header>
							<span class="color-red">*</span>
							俱乐部ID
						</template>
						<template slot-scope="scope">
							<el-select
								v-model="clubList[scope.$index].clubId"
								style="width:180px"
								:filterable="true"
								@change="handleChangeClub($event, scope.$index)"
							>
								<el-option
									v-for="item in selectClubList"
									:key="item.id + Math.random()"
									:label="item.id"
									:value="item.clubId"
								></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column
						label="俱乐部名称"
						min-width="150"
						align="center"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ clubList[scope.$index].clubName }}
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						min-width="100"
						align="center"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-button
								v-if="scope.$index !== 0"
								type="text"
								@click="handleDeleteClub(scope.$index)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button
					type="primary"
					:loading="submitLoading"
					:disabled="submitLoading"
					@click="handleSubmit"
				>
					{{ $t('common.sure') }}
				</el-button>
				<el-button @click="handleClose" :disabled="submitLoading">
					{{ $t('common.cancel') }}
				</el-button>
			</div>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowGoogleKey"
			@getGoogleKey="submitGoogleKey($event)"
			@backPrevStep="closeGoogleKey()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	components: {
		GoogleKeyInput: () => import('@/components/GoogleKeyInput')
	},
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			isShowGoogleKey: false,
			submitLoading: false,
			submitForm: {},
			clubList: [],
			selectClubList: []
		}
	},
	created() {
		this.getSelectClubList()
		this.submitForm = {
			leaguesId: this.detailData?.id,
			leaguesName: this.detailData?.leaguesName,
			remark: this.detailData?.remark
		}
		this.clubList = []
		if (Array.isArray(this.detailData?.clubList)) {
			this.clubList = this.detailData?.clubList.map((item) => {
				return {
					clubId: item.clubId,
					clubName: item.clubName
				}
			})
		}
	},
	methods: {
		getSelectClubList() {
			this.selectClubList = []
			// getClubLeaguesQueryAllClub--clubManagerList
			this.$api
				.getClubLeaguesQueryAllClub({})
				.then((res) => {
					if (res?.data && Array.isArray(res?.data)) {
						res?.data.forEach((item) => {
							this.selectClubList.unshift({
								id: item.id,
								clubId: item.id,
								clubName: item.clubName
							})
						})
						// this.selectClubList = res?.data.map((item) => {
						// 	return {
						// 		id: item.id,
						// 		clubId: item.id,
						// 		clubName: item.clubName
						// 	}
						// })
					}
				})
				.catch(() => {})
				.finally(() => {})
		},
		handleChangeClub(val, index) {
			const checkClubId = this.clubList.find(
				(item, itemIndex) =>
					Number(item.clubId) === Number(val) && itemIndex !== index
			)?.clubId

			if (checkClubId) {
				this.$message.closeAll()
				this.$message.warning('俱乐部ID重复')
				this.clubList[index].clubId = undefined
				this.clubList[index].clubName = undefined
				return
			}

			this.clubList[index].clubName = this.selectClubList.find(
				(item) => item.clubId === val
			)?.clubName
		},
		handleDeleteClub(index) {
			this.clubList.splice(index, 1)
		},
		handleAddClub() {
			this.clubList.push({})
		},
		handleSubmit() {
			this.$refs.submitForm.validate((valid) => {
				if (valid) {
					// 俱乐部清单未配置
					if (!this.clubList.length) {
						this.$message.closeAll()
						this.$message.warning('俱乐部清单未配置，请检查')
						return
					}

					// 俱乐部清单校验
					let validIndex = 0
					let validTips = ''
					const submitClubArr = []
					for (let index = 0; index < this.clubList.length; index++) {
						if (!this.clubList[index].clubId) {
							validTips = '俱乐部ID不能为空'
							validIndex = index
							break
						}
						this.clubList[index].clubId = Number(
							this.clubList[index].clubId
						)
						if (
							submitClubArr.includes(this.clubList[index].clubId)
						) {
							validTips = '俱乐部ID重复'
							validIndex = index
							break
						}
						submitClubArr.push(this.clubList[index].clubId)
					}
					// 校验不通过提示
					if (validTips) {
						this.$message.closeAll()
						this.$message.warning(validTips)
						this.$refs.refTable.setCurrentRow(
							this.clubList[validIndex]
						)
						return
					}
					// 重复俱乐部联盟清单校验
					const params = {
						...this.submitForm,
						clubList: this.clubList
					}
					this.submitLoading = true
					this.$api
						.checkClubLeaguesClubIsReapet(params)
						.then((res) => {
							this.submitLoading = false
							if (res?.code === 200) {
								this.isShowGoogleKey = true
							}
						})
						.catch(() => {
							this.submitLoading = false
						})
						.finally(() => {})
				}
			})
		},
		closeGoogleKey() {
			this.isShowGoogleKey = false
		},
		submitGoogleKey(googleVerifyCode) {
			this.handleGoogleKeySubmit(googleVerifyCode)
		},
		// 点击谷歌密钥提交
		handleGoogleKeySubmit(googleVerifyCode) {
			const params = {
				...this.submitForm,
				clubList: this.clubList,
				googleVerifyCode: googleVerifyCode
			}
			this.submitLoading = true
			this.$api
				.addOrEditClubLeagues(params)
				.then((res) => {
					this.submitLoading = false
					if (res?.code === 200) {
						this.$message.success('保存成功')
						this.handleClose()
						this.$emit('loadData')
					}
				})
				.catch(() => {
					this.submitLoading = false
				})
				.finally(() => {})
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea .el-input__count {
	bottom: -10px;
	right: -45px;
}
.color-red {
	color: red;
}
</style>
